<template>
  <div class="location-edit-page">
    <el-card>
      <div class="toolbar">
        <el-button @click="$router.back()">返回</el-button>
      </div>
      <el-form :model="form" label-width="90px" style="max-width: 600px;">
        <el-form-item label="库位编号" required>
          <el-input v-model="form.code" maxlength="20" />
        </el-form-item>
        <el-form-item label="所属仓库" required>
          <el-select v-model="form.warehouse" placeholder="请选择仓库" style="width:180px;">
            <el-option v-for="w in warehouseList" :key="w.id" :label="w.name" :value="w.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分区">
          <el-select v-model="form.zone" placeholder="请选择分区" style="width:180px;">
            <el-option v-for="z in filteredZoneOptions" :key="z.id" :label="z.name" :value="z.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="货架">
          <el-select v-model="form.shelf" placeholder="请选择货架" style="width:180px;">
            <el-option v-for="s in filteredShelfOptions" :key="s.id" :label="s.name" :value="s.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="层级">
          <el-input v-model="form.level" maxlength="10" />
        </el-form-item>
        <el-form-item label="位置编号">
          <el-input v-model="form.positionCode" maxlength="20" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型" style="width:180px;">
            <el-option v-for="t in typeList" :key="t.id" :label="t.name" :value="t.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="最大重量(kg)">
          <el-input-number v-model="form.maxWeight" :min="0" />
        </el-form-item>
        <el-form-item label="最大体积(m³)">
          <el-input-number v-model="form.maxVolume" :min="0" :step="0.01" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="可用" value="available" />
            <el-option label="占用" value="occupied" />
            <el-option label="锁定" value="locked" />
            <el-option label="禁用" value="disabled" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" maxlength="100" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode'
// 假设这些数据后续通过pinia或props注入
const warehouseList = ref([
  { id: 1, name: '上海仓' },
  { id: 2, name: '北京仓' }
])
const zoneList = ref([
  { id: 1, warehouseId: 1, name: 'A区' },
  { id: 2, warehouseId: 1, name: 'B区' },
  { id: 3, warehouseId: 2, name: 'C区' }
])
const shelfList = ref([
  { id: 1, zoneId: 1, name: 'A1货架' },
  { id: 2, zoneId: 1, name: 'A2货架' },
  { id: 3, zoneId: 2, name: 'B1货架' },
  { id: 4, zoneId: 3, name: 'C1货架' }
])
const typeList = ref([
  { id: 1, name: '标准' },
  { id: 2, name: '冷藏' }
])
const form = ref({
  code: '',
  warehouse: 0,
  zone: 0,
  shelf: 0,
  level: '',
  positionCode: '',
  type: '',
  maxWeight: 0,
  maxVolume: 0,
  status: 'available',
  barcode: '',
  qrcode: '',
  remark: ''
})
const router = useRouter()
const route = useRoute()
// 假设locationList为全局/父组件/Pinia数据，这里用mock
const locationList = ref([
  { id: 1, code: 'A1-01', warehouse: 1, warehouseName: '上海仓', zone: 1, zoneName: 'A区', shelf: 1, shelfName: 'A1货架', level: '1', positionCode: 'P001', type: '普通', maxWeight: 1000, maxVolume: 10, stock: 60, status: 'available', barcode: '上海仓-A区-A1货架-1-P001', qrcode: '', remark: '主通道' },
  { id: 2, code: 'A1-02', warehouse: 1, warehouseName: '上海仓', zone: 1, zoneName: 'A区', shelf: 1, shelfName: 'A1货架', level: '2', positionCode: 'P002', type: '普通', maxWeight: 1000, maxVolume: 10, stock: 80, status: 'occupied', barcode: '上海仓-A区-A1货架-2-P002', qrcode: '', remark: '' },
  { id: 3, code: 'B1-01', warehouse: 2, warehouseName: '北京仓', zone: 2, zoneName: 'B区', shelf: 3, shelfName: 'B1货架', level: '1', positionCode: 'P003', type: '普通', maxWeight: 800, maxVolume: 8, stock: 30, status: 'available', barcode: '北京仓-B区-B1货架-1-P003', qrcode: '', remark: '' }
])

onMounted(() => {
  const id = Number(route.query.id)
  if (id) {
    const row = locationList.value.find(l => l.id === id)
    if (row) {
      form.value = { ...row }
    }
  }
})
const filteredZoneOptions = computed(() => zoneList.value.filter(z => z.warehouseId === form.value.warehouse))
const filteredShelfOptions = computed(() => shelfList.value.filter(s => s.zoneId === form.value.zone))
watch(() => form.value.warehouse, () => {
  form.value.zone = 0
  form.value.shelf = 0
})
watch(() => form.value.zone, () => {
  form.value.shelf = 0
})
function onSave() {
  if (!form.value.code) return ElMessage.warning('请填写库位编号')
  if (!form.value.warehouse) return ElMessage.warning('请选择所属仓库')
  // 生成条码内容
  const warehouseName = warehouseList.value.find(w => w.id === form.value.warehouse)?.name || ''
  const zoneName = zoneList.value.find(z => z.id === form.value.zone)?.name || ''
  const shelfName = shelfList.value.find(s => s.id === form.value.shelf)?.name || ''
  const barcode = `${warehouseName}-${zoneName}-${shelfName}-${form.value.level}-${form.value.positionCode}`
  form.value.barcode = barcode
  QRCode.toDataURL(barcode).then((url: string) => {
    form.value.qrcode = url
    // 这里应有保存逻辑，暂用提示
    ElMessage.success('保存成功')
    router.back()
  })
}
</script>

<style scoped>
.location-edit-page { padding: 24px; background: #f7f8fa; min-height: 100vh; }
.toolbar { display: flex; gap: 12px; margin-bottom: 24px; align-items: center; }
</style> 